{% extends 'base.html'%}
{% load staticfiles %}
{% block aside %}
      <section class="hbox stretch">
        <section>
          <section class="vbox">
            <section class="scrollable padder-lg w-f-md" id="bjax-target">
              <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
              <h2 class="font-thin m-b">Discover <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                <span class="bar1 a1 bg-primary lter"></span>
                <span class="bar2 a2 bg-info lt"></span>
                <span class="bar3 a3 bg-success"></span>
                <span class="bar4 a4 bg-warning dk"></span>
                <span class="bar5 a5 bg-danger dker"></span>
              </span></h2>
              <div class="row row-sm">
              {% for music in music_list %}
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                  <div class="item">
                    <div class="pos-rlt">
{#                      <div class="bottom">#}
{#                        <span class="badge bg-info m-l-sm m-b-sm">03:20</span>#}
{#                      </div>#}
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="text-info padder m-t-sm text-sm">
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star-o text-muted"></i>
                        </div>
                        <div class="center text-center m-t-n" onclick="isplay(event)" videoid="{{ music.id }}">
                          <a href="javascript:void(0)"><i class="icon-control-play i-2x music-icon"></i></a>
                        </div>
                        <div class="bottom padder m-b-sm">
                        {% if user.is_authenticated %}
                          <a href="javascript:void(0)" onclick="add_favorite_music('{{ music.id }}')" mid="{{ music.id }}" class="pull-right">
                            <i class="fa fa-heart-o"></i>
                          </a>
                          {% if perms.music.download and music.is_download == 0 %}
                            <a href="{{ music.music_src.url }}" download="{{ music.name }}">
                                <i class="icon-cloud-download"></i>
                            </a>
                          {% elif perms.music.download and music.is_download == 1 %}
                              <a href="javascript:void(0)" onclick="show_toast('warning','该音乐暂时不允许下载', '{{ user.avatar.url }}')">
                                <i class="icon-cloud-download"></i>
                              </a>
                          {% elif not perms.music.download %}
                              <a href="javascript:void(0)" onclick="show_toast('warning','您需要实名认证之后才能下载', '{{ user.avatar.url }}')">
                                <i class="icon-cloud-download"></i>
                              </a>
                          {% endif %}
                        {% else %}
                            <a href="javascript:void(0)" onclick="toast_warning()" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                            </a>
                            <a href="javascript:void(0)" onclick="toast_warning()"><i class="icon-cloud-download"></i></a>
                        {% endif %}
                        </div>
                      </div>
                      <a href="#"><img src="{{ music.music_cover.url }}" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                        <a href="{{ music.get_absolute_url }}" class="text-ellipsis">{{ music.name }}</a>
                        {% if user.is_authenticated %}
                            <a href="{% url 'user:show_another' music.user_id %}" class="text-ellipsis text-xs text-muted">{{ music.user.username }}</a>
                        {% else %}
                            <a href="javascript:void(0)" onclick="toast_warning()" class="text-ellipsis text-xs text-muted">{{ music.user.username }}</a>
                        {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
              </div>
            </section>
    <script type="text/javascript">
        var mp3_list = [];
        {% for music in music_list %}
            var author = '{{ music.user.username }}';
            var url = '{{ music.music_src.url }}';
            var name = '{{ music.name }}';
            var video_id = '{{ music.id }}';
            var mp3 = {'author': author, 'url': url, 'name': name, 'videoid': video_id};
            mp3_list.push(mp3);
        {% endfor %}
    </script>
    <script type="text/javascript">
         function add_favorite_music(music_id){
            $.post("{% url 'favorite:add_favorite_music' %}",{
                'music_id': music_id,
                'user_id': '{{ user.id }}',
            },
             function(data) {
                var ele = $("a[mid="+data.id+"]");
                if (data.status === 'ok') {
                    ele.addClass("active");
                    ele.children().removeClass("fa-heart-o text");
                    ele.children().addClass("fa-heart text-active text-danger");
                    show_toast('success', data.msg, '{{ user.avatar.url }}')
                }
                else {
                    show_toast('warning', data.msg, '{{ user.avatar.url }}')
                }
            });
        }
    </script>
{% endblock aside %}